<template>
<div>
  <validator name="form">
    <button type="button" class="btn btn-default" @click.prevent="onSubmit">{{$t("common.connect")}}</button>
    <input type="text" class="form-control" placeholder="IP" v-model="ipaddr" v-validate:ipaddr="{ip: true}">
    <input type="text" class="form-control" :placeholder="$t('auth.username')" v-model="authInfo.verify.username" v-validate:username="{required: true}">
    <input type="password" class="form-control" :placeholder="$t('auth.password')" v-model="authInfo.verify.password" v-validate:password="{required: true}" @keyup.enter="onSubmit">
  </validator>
</div>
</template>

<script>
import toast from 'libs/toast.js'
import debugCfg from 'share/debugCfg.js'

export default {
  props: {
    ipaddr: {
      type: String,
      required: true
    },
    trySignIn: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      authInfo: {
        verify: {
          username: '',
          password: ''
        }      
      }
    }
  },
  methods: {
    onSubmit () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }
      this.trySignIn(this.authInfo.verify)
    }
  },
  ready () {
    if (debugCfg.debugOn) {
      this.authInfo.verify.username = 'admin'
      this.authInfo.verify.password = 'admin'
    }
  }
}
</script>

<style>
</style>